import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:casdon/app/config/theme/theme_extention.dart';

class DynamicTabBar extends StatefulWidget {
  final List<String> tabs;
  final int selectedIndex;
  final ValueChanged<int> onTap;

  const DynamicTabBar({
    super.key,
    required this.tabs,
    required this.selectedIndex,
    required this.onTap,
  });

  @override
  State<DynamicTabBar> createState() => _DynamicTabBarState();
}

class _DynamicTabBarState extends State<DynamicTabBar> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 36.h,
      child: ListView.separated(
        scrollDirection: Axis.horizontal,
        padding: EdgeInsets.symmetric(horizontal: 12.w),
        itemCount: widget.tabs.length,
        separatorBuilder: (_, __) => SizedBox(width: 8.w),
        itemBuilder: (context, index) {
          final selected = widget.selectedIndex == index;
          return GestureDetector(
            onTap: () => widget.onTap(index),
            child: AnimatedContainer(
              key: ValueKey('${index}_${widget.selectedIndex}'),
              duration: const Duration(milliseconds: 200),
              padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
              decoration: BoxDecoration(
                color: selected ? context.colorScheme.primary : Colors.white,
                borderRadius: BorderRadius.circular(12.w),
                boxShadow: selected
                    ? [
                        BoxShadow(
                          color: Colors.black12,
                          blurRadius: 4.w,
                          offset: const Offset(0, 2),
                        ),
                      ]
                    : [],
              ),
              child: Center(
                child: Text(
                  widget.tabs[index],
                  style: selected
                      ? Theme.of(
                          context,
                        ).textTheme.labelMedium!.copyWith(color: Colors.white)
                      : Theme.of(context).textTheme.bodyMedium!.copyWith(
                          color: context.customColorThemeNonNull.textColor1,
                        ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}
